<template>
  <el-container>
    <!--头部-->
    <el-header height="80px">
      <div class="logo">
        <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1734272281,1865830744&fm=26&gp=0.jpg" alt="">
        <p class="company_name">
          小沈个人开发中心
        </p>
         
      </div>
     
      <div class="nav">

       
        <div class="userMenu">
      
          <p>{{username}}</p>
          <div class="author">
              <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3809442943,2036280987&fm=27&gp=0.jpg"  alt="">
          </div>
          <el-dropdown>
            <span class="el-dropdown-link">
              设置<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>切换账号</el-dropdown-item>
              <el-dropdown-item>注销</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </el-header>
    <!--主题内容-->
    <el-container>
      <!--侧边栏-->
      <el-aside width="200px">
        <el-menu :default-openeds="['1', '3']">
          <el-submenu index="1">
            <template slot="title"><i class="el-icon-menu"></i>用户列表</template>
            <el-menu-item-group>
              
              <el-menu-item index="1-1">管理员</el-menu-item>
              <el-menu-item index="1-2">普通用户</el-menu-item>
              <el-menu-item index="1-3">全部用户</el-menu-item>
            </el-menu-item-group> 
          </el-submenu>


          <el-submenu index="2">
            <template slot="title"><i class="el-icon-tickets"></i>功能管理</template>
            <el-menu-item-group>
              <el-menu-item index="2-1">软装方案</el-menu-item>
              <el-menu-item index="2-2">四维全景</el-menu-item>
               <el-menu-item index="2-3">聚宝盆</el-menu-item>
            </el-menu-item-group>
           
        
          </el-submenu>
          <el-submenu index="3">
            <template slot="title"><i class="el-icon-setting"></i>设置</template>
            <el-menu-item-group>
              <el-menu-item index="3-1">系统设置</el-menu-item>
              <el-menu-item index="3-2">常规设置</el-menu-item>
            </el-menu-item-group>
          
           
          </el-submenu>
        </el-menu>
      </el-aside>
      <!--内容-->
      <el-main>
           <el-table
              :data="tableData"
              style="width: 100%"
              :default-sort = "{prop: 'date', order: 'descending'}"
              >
              <el-table-column
                prop="date"
                label="日期"
                sortable
                width="180">
              </el-table-column>
              <el-table-column
                prop="name"
                label="姓名"
                sortable
                width="180">
              </el-table-column>
              <el-table-column
                prop="address"
                label="地址"
                :formatter="formatter">
              </el-table-column>
            </el-table>
            <el-pagination
              background
              layout="prev, pager, next"
              :total="1000">
            </el-pagination>

      </el-main>
    </el-container>
  </el-container>
</template>
<script>
export default {
  name: 'Home',
   data(){
    return {
      username: this.$route.params.username,
      tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
      }
  },
  
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  .el-header{
    border: 1px solid  #eee;
    position: fixed;
    top:0;
    left:0;
    width: 100%;
    height: 80px;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    // background-color:gainsboro;
    color: #333;
    .logo{
      display: flex;
      display: -webkit-flex;
      align-items: center;
      -webkit-align-items: center;
      img{
        width: 120px;
        height: 60px;
        margin-right: 10px;
      }
    }
    .company_name{
      font-size: 20px;
      color: black;
    }
    .nav{
      display: flex;
      display: -webkit-flex;
      align-items: center;
      -webkit-align-items: center;
      .cms-a{

      }
      .userMenu{
        display: flex;
        display: -webkit-flex;
        align-items: center;
        -webkit-align-items: center;
        margin-left: 100px;
        .author{
          margin-left: 5px;
          margin-top: 5px;
          width: 40px;
          height: 40px;
          border-radius: 50%;
          overflow: hidden;
          background-color: #c0c0c0;
          img{
            width: 100%;
            height: 100%;
          }
        }
        .el-dropdown{
          margin-left: 10px;
        }
      }
    }
  }

  .el-aside {
    position: absolute;
    left:0;
    top:80px;
    bottom: 0;
    // background-color: gainsboro;
    color: #333;
    text-align: left;
    .el-menu{
      background-color: transparent;
    }
  }

  .el-main {
    position: absolute;
    left:200px;
    top:80px;
    bottom:0;
    right: 0;
    background-color:white;
    color: #333;
    text-align: left;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .el-pagination{
  position: absolute; 
  bottom: 0;
  margin: auto;
  margin-bottom: 50px;
  }

  body > .el-container {
    min-width: 1000px;
    overflow-x: auto;
    overflow-y: auto;
    position: relative;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 100%;
  }
</style>
